<template>
  <div>
    <a-upload
      name="file"
      :multiple="true"
      :action="url.fileUpload"
      :headers="headers"
      @change="handleChange">
      <a-button><a-icon type="upload" />点击上传</a-button>
    </a-upload>


    <div class="clearfix">
      <a-upload
        action="url.fileUpload"
        listType="picture-card"
        :fileList="fileList"
        :headers="headers"
        @preview="handlePreview2"
        @change="handleChange2"
      >
        <div v-if="fileList.length < 3">
          <a-icon type="plus" />
          <div class="ant-upload-text">Upload</div>
        </div>
      </a-upload>
      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { ACCESS_TOKEN } from "@/store/mutation-types"

  export default {
    data () {
      return {
        headers: {
        },
        url: {
          fileUpload:"/sys/common/upload"
        },
        previewVisible: false,
        previewImage: '',
        fileList: [{
          uid: '-1',
          name: 'xxx.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        }],
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}

    },
    methods: {
      handleChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} 文件上传成功`);
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} 文件上传失败`);
        }
      },

      handleCancel () {
        this.previewVisible = false
      },
      handlePreview2 (file) {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      },
      handleChange2 ({ fileList }) {
        this.fileList = fileList
      },
    },
  }
</script>
